<template>
  <div class="wrap">
    <ul class="search-sort fx bg-w b-c">
      <li
        class="item cs"
        :class="{ active: activeIndex === i }"
        v-for="(item, i) in sort"
        :key="i"
        @click='changeAcitveIndex(i)'
      >
        <span>{{ item }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SortSearch",
  data() {
    return {
      sort: ["综合排序", "最新优先", "最热优先"],
      activeIndex: 0,
    };
  },
  methods: {
      changeAcitveIndex(i) {
          this.activeIndex = i;
      }
  }
};
</script>

<style lang="scss" scoped>
.search-sort {
  padding: 2rem;
  .item {
    margin-right: 2rem;
    border-right: 0.2rem solid #eaeaea;
    padding-right: 1.5rem;
    &:last-child {
      border-right: 0;
    }
    &.active {
      color: #007fff;
    }
  }
}
</style>